<template>
  <div class="w-full">
    <div class="flex justify-between h-24" @onmouseenter="showPlayItem = !showPlayItem">
      <div class="flex">
        <img :src="`${ShowList.cover}`" class="w-20 h-20 rounded-lg" alt="图片" style="cursor:pointer">
      </div>
      <div class="flex leading-[6rem] justify-between w-60">
        <div class="py-2">
          <p class="text-sm leading-[2rem]  w-32 textoverflow" :title="ShowList.title" style="cursor:pointer">
            <PublicName :name="ShowList.title" :_id="ShowList._id" />
          </p>
          <p class="text-sm leading-[2rem]  text-zinc-500">
            <PublicName :name="ShowList.artist[0].name" :id="ShowList.artist[0].id" style="cursor:pointer" />
          </p>
        </div>
        <div>
          <div class="w-8 h-8 my-2 yuanjiao flex leading-6 justify-center items-center bg-gray-300" v-if="showPlayItem">
            <i class=" iconfont icon-bofang2 text-gray-700"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="h-1"></div>
  </div>
</template>
<script setup lang="ts">
import { setTime } from '~~/hook/format'
interface Prop {
  cover: string,
  title: string,
  time: string,
  // album: String,
  _id: string,
  index: number
  artist: {
    id: number;
    name: string;
  }[],
}
const ShowList = defineProps<Prop>();
const time = setTime(ShowList.time);
let showPlayItem: boolean = false;
const emit = defineEmits(['changePlay']);
</script>
<style scoped lang="less"></style>
